<%= form_for(@translation, :as => :translation, :url => {:controller => "/tr8n/translations", :action => :submit}, :html => {:id => :tr8n_translator_form, :method => :post}) do |f| %>
  <%= hidden_field_tag(:origin, params[:origin]) %>
  <%= hidden_field_tag(:translation_key_id, @translation_key.id, :id => :tr8n_translator_translation_key_id) %>
  <%= hidden_field_tag(:translation_id, @translation.id, :id => :tr8n_translator_translation_id) %>
  <%= hidden_field_tag(:translation_has_dependencies, "false", :id => :tr8n_translator_translation_has_dependencies) %>

  <div style="padding:10px;padding-bottom:0px;">
      <%= render(:partial => "header")%>
      <div id="tr8n_translator_translation_container"> 
          <div class="strong small" style="padding-top:10px;"><%=tra("Enter {language} Translation:", nil, :language => tr8n_current_language.native_name)%></div>

          <%= f.text_area(:label, :id => "tr8n_translator_translation_label", :class => "keyboardInput", :style=>"padding: 5px 3px; width:100%;") %>

          <% if @translation_key.permutatable? %>
            <div style="<%=tr8n_style_attribute_tag('float', 'right')%>; font-size:10px; padding:3px;">
               <%=link_to(tra("generate context rules for this phrase"), {:action => :dependencies, :translation_key_id => @translation_key.id, :origin => params[:origin]}, :class=>"translation_action") %>
  					</div>
  				<% end %>
          
          <% if @translation_key.translation_tokens? %>
              <div id="tr8n_translator_tokens_simple_view" style="font-size:10px;">
              <div class="small_section_title" style="color: #999; font-size: 10px;">
                 <strong><%=tra("Translation Tokens")%></strong>
              </div>
  						
              <% @translation_key.translation_tokens.each do |token| %>
              	<% func = token.decoration? ? "insertDecorationToken('#{token.name}')" : "insertToken('#{token.name}')" %>
                <%= link_to_function(token.sanitized_name, "Tr8n.Translation.#{func};", :title => trla("Click to insert this token above") ) %>
              <% end %>
  						
  						<% if tr8n_current_language.cases.any? and @translation_key.data_tokens? %>
  							<div style="font-size: 10px; padding-top:15px;">
  								<%=link_to_function(tra("Click here if the token values depend on the language cases"), "Tr8n.Effects.hide('tr8n_translator_tokens_simple_view'); Tr8n.Effects.show('tr8n_translator_tokens_extended_view'); resizeFrame();")%>
  						  </div>
  						<% end %>	
            </div>
  					
            <% if tr8n_current_language.cases.any? %>
  						<div id="tr8n_translator_tokens_extended_view" style="display:none">
                <div class="small_section_title" style="color: #999; font-size: 10px;">
                   <strong><%=tra("Data Tokens")%></strong>
                </div>
                <div style="height:120px; overflow:auto; padding:2px; border:1px dotted #ccc; background-color:#f9f8f7;">
  							  <table style="width:100%;">
                    <% @translation_key.data_tokens.each do |token| %>
                      <% next unless token.supports_cases? %>
  							      <% tr8n_current_language.cases.each do |lcase| %>
  							      <tr>
  							      	  <td style="width:10%; padding-right:2px; vertical-align:top;font-size:10px; border-bottom:1px dotted #ccc;">
  												  <%= link_to_function(token.sanitized_name_for_case(lcase.keyword), "Tr8n.Translation.insertToken('#{token.name_for_case(lcase.keyword)}');", :title => trla("Click to insert this token above") ) %>
  							      	  </td> 
  							          <td style="width:90%; vertical-align:top; border-bottom:1px dotted #ccc; font-size:10px;">
  												   <div style='padding-bottom:2px'><%=lcase.native_name%></div>
  							             <div style="font-size:8px; color:grey; padding-bottom:2px"><%=lcase.description%></div>
  							          </td>
  										</tr>
  							      <% end %>
                    <% end %>
  								</table>
  							</div>
  							
  							<% if @translation_key.decoration_tokens? %>
                  <div class="small_section_title" style="color: #999; font-size: 10px;">
                     <strong><%=tra("Decoration Tokens")%></strong>
                  </div>
  								<div style="font-size:10px;">
                    <% @translation_key.decoration_tokens.each do |token| %>
                        <%= link_to_function(token.sanitized_name, "Tr8n.Translation.insertDecorationToken('#{token.name}');", :title => trla("Click to insert this token above") ) %>
                    <% end %>
  								</div>
  							<% end %>
  						</div>
           <% end %> 
          <% end %> 

          <% if @translation_key.implied_tokens? %>
              <div id="tr8n_translator_tokens_simple_view" style="font-size:10px;">
              <div class="small_section_title" style="color: #999; font-size: 10px;">
                 <strong><%=tra("Implied Tokens")%></strong>
              </div>
              
              <% @translation_key.implied_tokens.each do |token| %>
                <%= token.sanitized_name %>
              <% end %>
              <div style="color:#888;font-size:9px;padding-top:5px;">
                <%=tra("Implied tokens are used for generating context rules and should not be used in the actual translations.") %>
              </div>  
          <% end %>

  				
          <% if Tr8n::Config.enable_google_suggestions? and tr8n_current_language.suggestible? %>
  	        <div id="tr8n_google_suggestion_section" style="display:none; padding-top:10px;"> 
  	            <div class="small_section_title" style="color: #999; font-size: 10px;">
  	               <strong><%=tra("Suggested Translation")%></strong>
  	            </div>
  	        
  	            <div id="tr8n_google_suggestion_container_<%=@translation_key.id%>" style="" class="small_section">  
  	                <%=image_tag("tr8n/left_quote.png", :style=>"text-align:bottom;padding-bottom:5px;") %>
  	                <a onclick="Tr8n.element('tr8n_translator_translation_label').value=Tr8n.element('tr8n_translation_suggestion_<%=@translation_key.id%>').innerHTML; return false;" href="#">
  	                   <span class="small" id="tr8n_translation_suggestion_<%=@translation_key.id%>" title="<%=trla("Click to insert this suggested translation above")%>"></span>
  	                </a>
  	                <%=image_tag("tr8n/right_quote.png", :style=>"text-align:bottom;padding-top:5px;") %>
  	            
  	                <% sanitized_label = @translation_key.tokenless_label.gsub('"', '\"') %>
  	                <script type="text/javascript">
  	                	Tr8n.Translation.suggest("<%=@translation_key.id %>", "<%=sanitized_label %>", "<%=@translation_key.suggestion_tokens.join(',')%>", "<%=@translation_key.language.google_key%>", "<%=tr8n_current_language.google_key%>");
  	                </script>
  	           </div>
  	        </div>   
          <% end %> 
          
          <% if Tr8n::Config.enable_glossary_hints? and @translation_key.glossary? %>  
            <div class="small_section_title" style="color: #999; font-size: 10px; padding-top:10px;">
               <strong><%=tra("Glossary")%></strong>
            </div>
            
            <div id="tr8n_glossary_<%=@translation_key.id%>" class="small_section">
              <div class="glossary_table" style="max-height:150px;overflow:auto;border:solid 1px #ccc;">
                <table>
                  <% @translation_key.glossary.each do |term| %>
                    <% border_style = "border-bottom: 1px dotted #ccc;" unless @translation_key.glossary.last == term %>
                    <tr style="<%=border_style%>">
                      <td><strong><%=term.keyword %></strong></td>
                      <td><%=term.description %></td>
                    </tr>
                  <% end %>
                </table>
              </div>
            </div>
          <% end %>						
      </div>
  </div> 
<% end %>

<div id="tr8n_translator_buttons_container" class="buttons_container">
    <button type="submit" class="translator_btn translator_submit_btn" onClick="Tr8n.Translation.submit(); resizeFrame(); return false;">
        <span><%=tra("Translate")%></span>
    </button>
</div>

<% if Tr8n::Config.enable_software_keyboard? %> 
  <script>
    VKI_attach(document.getElementById('tr8n_translator_translation_label'));
  </script>
<% end %>

<script>
  Tr8n.element("tr8n_translator_translation_label").focus();
</script>
